<!-- 日期 -->
<template>
		<u-sticky offset-top="48">
			<view class="select-view flex">
				<view class="select-item time-view flex" @click="toggleTime">
					<text class="grey p-r-10">{{dateText || '请选择日期'}}</text>
					<u-icon :name="showTime?'arrow-up-fill':'arrow-down-fill'" color="#ccc" size="10"></u-icon>
				</view>
				<view class="flex select-item" v-if="isPageTurning">
					<view class="arrow-left p-l-40 p-r-40" @click="onPrev">
						<u-icon name="arrow-left" color="#ccc" size="16"></u-icon>
					</view>
					<view class="arrow-right p-l-40 p-r-40" @click="onNext">
						<u-icon name="arrow-right" color="#ccc" size="16"></u-icon>
					</view>
				</view>
				<slot name="content">
					<view class="check-account flex select-item">
						<text class="grey p-r-10">选择账户</text>
						<u-icon name="arrow-down-fill" color="#ccc" size="10"></u-icon>
					</view>
				</slot>
			</view>
			<!-- 自定义插槽 -->
			<slot></slot>
			<view class="flex time-option" v-if="showTime">
				<view class="opt-item" @click="setToday">
					今天
				</view>
				<view class="opt-item" @click="setSevenDays">
					近7天
				</view>
				<view class="opt-item" @click="setThirtyDaysAgo">
					近30天
				</view>
				<view class="opt-item" @click="getWeeks">
					周
				</view>
				<view class="opt-item" @click="setThisMonth">
					月
				</view>
				<view class="opt-item" @click="setCustom">
					自定义
				</view>
			</view>
			<!-- 自定义 -->
			<term-picker :visable.sync="pickerVisable"  :minYear="1990" :timeLimit="false"
				:deferYear="0" themeColor="#409EFF" startText="开始时间" endText="结束时间" @confirm="confirmTime">
			</term-picker>
		</u-sticky>
</template>

<script>
	import termPicker from '@/components/cx-term-picker/cx-term-picker.vue'
	import {formatDate, date} from '@/utils/util.js'
	export default {
		name: 'Time',
		components: {
			termPicker
		},
		props: {
			defaultTime: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				showTime: false,
				dateText: '',
				isPageTurning: true,
				num: 0,
				pickerVisable:false,
				defaultDate: ['2020-01-01', '2021-01-01']
			}
		},
		methods: {
			toggleTime() {
				this.showTime = !this.showTime;
			},
			// 初始化日期参数
			intDate() {
				const dates = new Date();
				const year = dates.getFullYear();
				const month = dates.getMonth();
				const day = dates.getDate();
				const week = dates.getDay();
				return {year, month, day, week}
			},
			// 获取今天
			getToday() {
				let {month, day} = this.intDate();
				const n_month = month+1;
				const date =  `${n_month>9?n_month:'0'+n_month}-${day>9?day:'0'+day}`;
				return date;
			},
			// 设置今天
			setToday() {
				let {year} = this.intDate();
				let start = `${year}-${this.getToday()}`
				this.dateText = this.getToday()+'今日';
				this.showTime = false;
				this.$emit('success', [start,start]);
				this.isPageTurning = true;
				this.$emit('hasPage', true)
				this.num = 0
			},
			// 获取近七天
			getSevenDays() {
				let dates = [];
				let now = new Date();
				// 循环获取最近 7 天的日期
				for (let i = 0; i < 7; i++) {
				  // 获取当前日期的时间戳
				  let timestamp = now.getTime();
				
				  // 计算 i 天前的时间戳
				  let dayTimestamp = 24 * 60 * 60 * 1000; // 一天的毫秒数
				  let iDayAgoTimestamp = timestamp - i * dayTimestamp;
				
				  // 转换为日期对象
				  let date = new Date(iDayAgoTimestamp);
				
				  // 格式化日期为 "MM-dd" 的字符串并存入数组
				  let year = date.getFullYear();
				  let month = ("0" + (date.getMonth() + 1)).slice(-2);
				  let day = ("0" + date.getDate()).slice(-2);
				  dates.push(month + "-" + day);
				}
				return dates;
			},
			// 设置近七天
			setSevenDays() {
				let {year} = this.intDate();
				const seven_days = this.getSevenDays();
				const end = seven_days.slice(0, 1).join();
				const start = seven_days.pop()
				const _s = `${year}-${start}`;
				const _e = `${year}-${end}`;
				
				this.dateText = `${start} ~ ${end}`
				this.showTime = false;
				this.$emit('success', [_s,_e]);
				this.hidePage()
			},
			// 获取近30天
			getThirtyDaysAgo() {
				var currentDate = new Date();
				var thirtyDaysAgo = new Date(currentDate.getTime() - 30 * 24 * 60 * 60 * 1000);
				var year = thirtyDaysAgo.getFullYear();
				var month = thirtyDaysAgo.getMonth() + 1;
				var day = thirtyDaysAgo.getDate();
				if (month < 10) {
				  month = "0" + month;
				}
				if (day < 10) {
				  day = "0" + day;
				}
				var formattedDate = month + "-" + day;
				return formattedDate
			},
			// 设置近30天
			setThirtyDaysAgo() {
				this.showTime = false;
				this.dateText = `${this.getThirtyDaysAgo()} ~ ${this.getToday()}`
				let {year} = this.intDate();
				const _s = `${year}-${this.getThirtyDaysAgo()}`;
				const _e = `${year}-${this.getToday()}`
				this.$emit('success', [_s,_e]);
				this.hidePage()
			},
			// 周
			getWeeks() {
				let {year, month, day, week} = this.intDate()
				const _month = month + 1;
				const start = formatDate(new Date(year,_month,day-week+1))
				const end = formatDate(new Date(year,_month,day-week+7))
				this.showTime = false;
				this.dateText = `${date('m-d', new Date(start).getTime())} ~ ${date('m-d', new Date(end).getTime())}`
				this.$emit('success', [start,end]);
				this.hidePage()
			},
			// 月
			setThisMonth() {
				let {year, month} = this.intDate()
				const _month = month+1>9?month+1:`0${month+1}`
				this.showTime = false;
				this.dateText = `${year}-${_month}本月`;
				this.$emit('success', [this.thisMonthFirstDay(),this.thisMonthLastDay()]);
				this.hidePage()
			},
			// 当月第一天
			thisMonthFirstDay() {
				let _date = new Date();
				_date.setDate(1);
				let _y = _date.getFullYear();
				let _m = _date.getMonth() + 1;
				_m = _m>10?_m:`0${_m}`;
				let _d = _date.getDate();
				return `${_y}-${_m}-${_d}`
			},
			// 当月最后一天
			thisMonthLastDay() {
				let _date = new Date();
				let _y = _date.getFullYear();
				let _m = _date.getMonth() + 1;
				let nextMonthFirstDay = new Date(_y,_m,1);
				let oneDay = 1000*60*60*24;
				let endDay = new Date(nextMonthFirstDay-oneDay);
				let _d = endDay.getDate()
				_m = _m>10?_m:`0${_m}`;
				return `${_y}-${_m}-${_d}`
			},
			// 自定义
			setCustom() {
				this.showTime = false
				this.pickerVisable = true
			},
			// 隐藏上下翻页
			hidePage() {
				this.isPageTurning = false
				// 根据此方法，单独配置样式
				this.$emit('hasPage', false)
			},
			// 获取某一天
			getNextDate(dayStr,num) {
				var dd = new Date(dayStr);
				dd.setDate(dd.getDate()+num);
				var y = dd.getFullYear(); 
				var m = dd.getMonth()+1;//获取当前月份的日期 
				var d = dd.getDate(); 
				// return y+"-"+m+"-"+d; 
				return `${y}-${m>9?m:'0'+m}-${d>9?d:'0'+d}`; 
			},
			// 翻页切换
			onPageTuring(num) {
				if(this.num == 0) {
					let {year, month, day} = this.intDate();
					this.dateText = this.getNextDate(`${year}-${month+1}-${day}`,num)
					this.num++
				} else {
					this.dateText = this.getNextDate(this.dateText,num)
				}
				this.$emit('success', [this.dateText,this.dateText]);
			},
			// 上一天
			onPrev() {
				this.onPageTuring(-1)
			},
			// 下一天
			onNext() {
				this.onPageTuring(1)
			},
			// 自定义
			confirmTime(val) {
				let start = val[0].split('-').slice(1).join('-');
				let end = val[1].split('-').slice(1).join('-');
				this.dateText = `${start} ~ ${end}`;
				this.$emit('success', val);
			},
			
		},
		mounted() {
			// this.dateText = this.getToday()+'今日'
			if(this.defaultTime){
				this[this.defaultTime]()
			}
			
		}
	}
</script>

<style lang="scss">
	.select-view {
		padding: 20rpx;
		background: #fff;
		justify-content: space-between;
		.select-item {
			// flex: 1;
		}
	}
	.time-option {
		background: #fff;
		width: 90%;
		margin: 20rpx auto;
		padding: 20rpx 40rpx;
		justify-content: space-between;
		color: #666;
		box-shadow: 4rpx 8rpx 10rpx #ddd;
		border-radius: 10rpx;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}
</style>